<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, user-scalable=no, initial-sacle=1.0, minimum-scale=1.0, maximum-scale=1.0">
        <link rel="stylesheet" href="index.css">
        <title>今日热榜</title>
    </head>
    <body>
        <div id="app">
            <transition-group class="box" name="list" tag="ul">
                <li class="box-item" v-for="item of list" :key="item.name">
                    <header class="box-header">
                        <h1 class="box-title">{{item.name}}</h1>
                        <time class="update-time">{{item.last_update}}</time>
                    </header>
                    <ul class="top-list">
                        <li class="top-list-item" v-for="(sub_item, sub_index) of item.list.slice(0, 10)" :key="sub_index">
                            <a :href="sub_item.link" :title="sub_item.title" target="_blank">{{sub_item.title}}</a>
                            <template v-if="sub_item.other">
                                <img src="hot.png" alt="">
                                <span>{{sub_item.other.replace(/阅读.*/, '')}}</span>
                            </template>
                        </li>
                    </ul>
                </li>
            </transition-group>
        </div>

        <script src="https://cdn.jsdelivr.net/npm/vue"></script>
        <script src="index.js"></script>
    </body>
</html>
